Cursus 


Snelcursus websites bouwen 


Leer html in één uur 


Er bestaan tonnen programma’s om een website in elkaar te steken, maar je kan pas echt 
wonderen doen als je wat basiskennis html hebt. Html is dé taal van het internet, de code om 
webpagina's te maken zeg maar. Vaak zien mensen ertegenop om html te leren omdat het zo 
moeilijk lijkt. Maar dat is maar schijn: eens je de basis kent, kan je er alle kanten mee uit! 


at heb je nu nodig om een website te maken? FrontPa- schrijven kan je gewoon met Kladblok! Kladblok vind je onder START 
ge of een ander programma waarvoor je veel geld op ta- _— ALLE PROGRAMMA'S — BUREAU-ACCESSOIRES. Doe dat dus maar even 
en je bent volledig uitgerust om te beginnen aan deze html-cursus! 


fel moet leggen? Neen! Je kan een html-editor down- 


loaden van het internet, maar eigenlijk is zelfs dat niet nodig. Html 


Een blanco webpagina 


Eerste regel: html-code zie je niet op je web- 
pagina: je geeft met de codes eigenlijk beve- 
len aan tekst, achtergrond of je pagina. Elke 
webpagina heeft een standaardstructuur die 
je altijd moet respecteren. De code daarvoor 
is: 


<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
</BODY> 
</HTML> 


Zoals je kan zien, staan alle html-codes tus- 
sen zogenaamde tags < >. Met de code <html> 


geef je aan dat je html-code gebruikt in het do- 


À C:\Documents and Settings\Familie DebelsWMijn documententw… (=|) 
Bestand Bewerken Beeld Favorieten Extra Help 4e 


2) À A) j) zoeken 9 Favorieten @) meda 


adres |] ments and Settings\Familie Debels\ijn documentenwebsite\index.htm «| Bj Ga naar 


P index.htm - Kladblok 
Bestand Bewerken 
<html> 


Opmaak Be 


<head> 
</head> 


<body> 
</hady> 


<4htm1l> 


5 EEE LUNIpULEN 


Het is niet omdat je html-code intikt, dat 
je die ook te zien krijgt op je webpagina… 
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cument. Door een schuine streep / voor een 
commando te plaatsen, geef je aan dat je het 
commando beëindigt. Met </html> geef je dus 
aan dat de html-code eindigt. Een blanco web- 
pagina bestaat uit twee delen: het hoofd (head) 
en de body. In de body komen later codes die 
je webpagina een inhoud geven. In het hoofd 
kan je later instellingen voor je pagina, zoals 
een titel, meegeven. 

Je hoeft niet overal een nieuwe lijn te nemen 
zoals wij dat hier gedaan hebben. De volgor- 
de van de code is wel belangrijk, maar hoeveel 
spaties of regels je ertussen plaatst, doet er he- 
lemaal niet toe. Zorg alleen dat je het overzicht 
behoudt, waarvoor de Enter-toets heel handig 
kan zijn. 

Zorg ervoor dat je je pagina opslaat als html- 
bestand en dus niet als tekst. Nadat je de code 
voor een blanco pagina in Kladblok hebt ge- 
tikt, kies je in het menu BESTAND voor OPSLAAN 
ALs. Geef je bestand de naam INDEX.HTM (in- 
dex.html kan ook). De pagina waarmee je web- 
site begint, moet altijd index.htm of index.html 
heten. Voor de andere pagina’s mag je zelf een 
naam kiezen, neem wel korte namen. 

Je kan het best een nieuwe map binnen Mijn 
Documenten aanmaken met de naam ‘web- 
site’. Als je straks je webpagina op internet 
plaatst, moet je op die manier niet meer op 
zoek gaan naar alles wat bij je webpagina hoort. 
Open nu index.htm via Deze Computer of 
Windows Verkenner. Je zal zien dat je bestand 
geopend wordt via Internet Explorer, maar dat 
je niets te zien krijgt: een blanco pagina dus… 
Laten we er nu maar wat inhoud aan geven… 


Opmaak 


Ondanks de aanwezigheid van wat ge- 
typte tekst, ziet je pagina er nog vrij leeg 
uit. Dat komt natuurlijk door de blanco 
achtergrond en door gebrek aan een leu- 
ke opmaak. Gelukkig bestaan er tonnen 
codes om je pagina aantrekkelijker te ma- 
ken. 

Zo kan je bijvoorbeeld een achtergrond- 
kleur kiezen voor je webpagina door in 
de <body>-tag de code BGCOLOR=“KLEUR” 
te plaatsen. Dus wil je een blauwe ach- 
tergrond, dan krijg je de code: <BopY BG- 
COLOR=“BLUE">. Je kan ook gebruik ma- 
ken van de kleurcode van je gewenste ach- 
tergrondkleur. Dan krijg je bijvoorbeeld: 
<BODY BGCOLOR=“#3600FE">. Kleurco- 
des moeten niet tussen aanhalingstekens 
geplaatst worden, kleurnamen (in het En- 
gels!) wél. 

Ook kan je voor je tekst een ander kleur- 
tje uitkiezen. Dat doe je door in de 
<body>-tag de code TEXT=“KLEUR”" te plaat- 
sen. Ook hier kan je weer kiezen voor de 
Engelse naam van de kleur of voor de 
kleurcode. Kies je bijvoorbeeld voor wit- 
te letters op de blauwe achtergrond van 
daarnet, dan bekom je de code <Bopy BG- 
COLOR=#350OFE TEXT=#FFFFFF>. Om- 
dat deze codes in de <body>-tag geplaatst 
worden, zijn ze van toepassing op heel de 
webpagina. Elke kleur heeft zijn eigen 
kleurcode. Maar hoe weet je welke code 
bij welke kleur hoort? Kijk maar eens op 
[www.gifart.com/color-codes.shtml | en 
je kan al een heel eind verder! 

Er zijn nog meer opmaakmogelijkheden 
met tekst. Net zoals in een tekstverwer- 
kingsprogramma kan je je tekst vet ma- 
ken. Dat doe je door voor de tekst die je 
vet wil maken de tag <B> te gebruiken. 


HALF OUR #/ 
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<title>mijn eerste webpagina</title> 
</head> 


<body bgcolor="blue" text="white"> 


<hl>Dit zijn grote letters</hl> 
<Hô>en dit zijn kleintjes</Hor<hr> 


je kan tekst ook <hb>vers</b> of <i>cursief </i> maken of 
<u>onderlijnen</ur. of je kan het gewoon <b><i><u>alledrie</b> 
</Är</u>. 


<center> of je kan je tekst centreren</center> 


À Mijn eerste webpagina - Microsoft Internet Explorer 
Bestand Bewerken Beeld Favorieten Extra Help 


le) (2) MD zoeken Gy Favoreten meds @ 2 


adres |) C:\Documents and Settings\Familie Debels\Wijn documenteniwebsitelindex.htm 


Dit zijn grote letters 


n alledrie 


Met enkele lijntjes code kan je je pagina een hele 
nieuwe look geven… 


Als de vette tekst mag stoppen, gebruik 
je de tag </B>. Opgepast, deze code plaats 
je gewoon tussen je tekst en dus niet in 
de <body>-tag zoals daarnet. Op dezelf- 
de manier kan je de tags <I> en </I> ge- 
bruiken om je tekst cursief te maken en 
met de tags <u> en </u> kan je tekst on- 
derlijnen. Wil je je tekst centreren? Ge- 
bruik dan de tags <CENTER> en </CENTER>. 
Je kan ook een andere grootte van letter- 
type kiezen. Daarvoor gebruik je de tags 
<HCIJFER> </HCIJFER>. De cijfers kan je 
kiezen tussen 1 en 12. 1 is de grootste let- 
ter, 12 de kleinste. Wil je dus een titel bo- 
venaan je pagina zetten, dan kan je dat 
doen met de code <Hr>MIJN WEBPAGI- 
NA</Hr>. 


IK KAN HET AL IN ZEN 


Tekst 


Laten we meteen maar wat inhoud aan je 
pagina meegeven, want die ziet er nu nog- 
al leeg uit. De tekst die in je webpagina 
komt, moet altijd getypt worden in de body, 
dus tussen <body> en </body>. Typ maar 
eens een tekstje, en sla de wijzigingen op. 
Bekijk daarna de veranderingen in je brow- 
ser. Je zal zien dat je nu geen lege pagina 
meer hebt, maar dat de getypte tekst in je 
pagina verschijnt. Er zijn wel een paar din- 
getjes waar je moet op letten. Zo zal je tekst 
niet altijd klakkeloos overgenomen wor- 
den. Als je een nieuwe lijn neemt in klad- 
blok, zal die niet overgenomen worden 
door je browser. Ook daarvoor moet je een 
code gebruiken. Op de plaats waar je een 
nieuwe regel wil beginnen, plaats je de tag 
<BR> wat staat voor Break Rule en dus je 


tekst afkapt naar een nieuwe regel. Ook 
tabs en meerdere spaties na elkaar zullen 
niet overgenomen worden in je browser. 
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<title>mijn eerste webpagina</title> 
</head> 


<body> 
Tekst voor je pagina plaats ED altijd tussen de body-tags. 
Dit komt niet op een nieuwe lijn.<br> pit wél. 


ad 


©) Chpoemerts and SattingeFaerdin Dee Pijn docammeterivenbetejnde: Hm 


Tekst voor je pagna plaats je altijd tussen de body-tags. Dit komt reet op een nieuwe lijn. 
Dit wél 


Enters en spaties in kladblok worden niet altijd 
weergegeven in je browser. 
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Beelden in je pagina 


Zelfs als je je pagina een leuk kleurtje mee- 
geeft, kan het er nog vrij kaal uitzien. Daar- 
om worden webpagina's vaak opgefleurd met 
plaatjes. Als je een website wil maken met 
verschillende pagina’s en veel plaatjes, kan 
je het best een nieuwe map aanmaken bin- 
nen je map website. Deze map kan je dan 
IMAGES noemen. Kopieer alle nodige prent- 
jes dan naar deze map. Heb je maar één of 
twee prentjes nodig, dan kan je ze ook ge- 
woon in je map website plaatsen. Opgepast! 
Omdat je prentjes straks op het net moeten 
worden geplaatst, moet je ervoor zorgen dat 
je prentjes geen te grote bestandsgrootte en 
te hoge resolutie hebben. Kies ook zeker de 
juiste extensie: gif- of jpgbestanden zijn op 
het internet het populairst. Zorg er ook voor 
dat je geen afbeeldingen op het net plaatst 
die beschermd zijn door copyright. Hetzelf- 


de geldt uiteraard ook voor teksten op je pa- 
gina. 

Om een beeld in je pagina te plaatsen gebruik 
je de code <IMG sRC=“BRON">. Het moeilijk- 
ste aan deze code is de bron invullen. Staat 
je afbeelding in dezelfde map als je huidige 
webpagina (index.htm)? Dan kan je als bron 
gewoon de volledige bestandsnaam (dus mét 
extensie) opgeven. Zo krijg je bijvoorbeeld 
de code <IMG src=“FOTOIJPG”>. Heb je je af- 
beeldingen in een submap van je webpagina 
geplaatst? Dan is de bronvermelding de naam 
van je map gevolgd door een schuine streep 
| en de volledige bestandsnaam. Je bekomt 
dan bijvoorbeeld de code <IMG SRC=“IMAGES / 
FOTOI.JPG”>. Zorg ervoor dat je de bestands- 
naam juist overtypt. Als je een kleine letter 
schrijft in plaats van een hoofdletter, zou het 
al kunnen mislopen. 


BÀ Mijn eerste webpagina - Microsoft Internet Explorer 


Bestand Bewerken Beeld Favoriten Extra Help 


le) |Z) Ò zoeken Ppravorieten @meda F 


8) C:\pocuments and Settings\Familie Debels\Mijn documenten\website\index.htm 


Je kan je pagina opfleuren met enkele leuke 
afbeeldingen. 


Links leggen 


Geen webpagina zonder links, dus le- 
ren we je natuurlijk ook hoe je een link 
moet leggen. Zo’n link bestaat meest- 
al uit tekst, maar het kan ook zijn dat 
je via een plaatje gelinkt wordt naar 
een andere pagina of naar een e-mail- 
adres. 

Voor een link gebruik je de code <A 
HREF=“ADRES">TEKST OF AFBEELDING 
LINK</A>. Link je naar een andere web- 
site en doe je dat door de naam van die 
webpagina te vermelden, dan gebruik 
je bijvoorbeeld de code <A 
HREF=“ HTTP: / /WWW.CLICKXMAGAZI- 
NE.BE”>CLICKX MAGAZINE</A>. Het is 
belangrijk dat je altijd het volledige 
webadres (dus mét http) ingeeft. Wil 
je een link naar een e-mailadres? Dan 
wordt je code <A HREF=“ MAILTO:EMAIL- 
ADRES” >MAIL ME</A>. Zorg ervoor dat 
je het volledige e-mailadres ingeeft, 
dus bijvoorbeeld 

<A HREF=“MAILTO:CLICKX(ÒMINOC.COM” > 
MAIL CLICKX MAGAZINES /A>. 

Meestal bestaan websites uit meer dan 
één pagina. Je kan de andere pagina’s 
bereiken via links. Als je een link wil 
leggen naar je eigen pagina, volstaat 
de code <A HREF=“BRON">TEKST OF AF- 
BEELDING</A>. De bronvermelding gaat 
dan net zoals bij een afbeelding. Be- 
vindt de nieuwe pagina zich in dezelf: 
de map van de huidige pagina, dan vol- 
staat de volledige bestandsnaam van 
je pagina, bijvoorbeeld <A HREF=“PAGI 
NALHTM” >PAGINA I</A>. Bevindt de pa- 
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gina zich in een submap, dan maak je 
weer gebruik van de naam van die map 
gevolgd door een schuine streep. Be- 
vindt de huidige pagina zich in een 
submap van de pagina die je met je 
link wil bereiken? Met de code <A 
HREF=“. /PAGINAI.HTM”> wordt pagi- 
nar.htm geopend in de hogergelegen 
map van de pagina die momenteel ge- 
opend is. 

Wil je een afbeelding als link? Dan 
plaats je tussen de <A HREF=“LINK"> en 
de </A>-tags gewoon de code om een 
afbeelding in te voegen, dus bijvoor- 
beeld <A HREF=“WWW.CLICKXMAGAZI- 
NE.BE”><IMGSRC="IMAGES/ CLICKX. 
JPG”></A>. Er komt dan wel een boord 
rondom je afbeelding die aan de be- 
zoekers van je pagina toont dat het om 
een link gaat. Wil je die boord weg- 
werken? Plaats dan in je <img>-tag de 
code BORDER=O, dus bijvoorbeeld <iMG 
SRC="CLICKX.JPG” BORDER=O>. 

Als je links plaatst naar andere websi- 
tes, wil je meestal niet dat je bezoeker 
jouw pagina verlaat om die sites te be- 
zoeken. Daarom kan je ervoor zorgen 
dat de links geopend worden in een 
nieuw venster. Daarvoor plaats je in de 
<A HREF>-tag de code TARGET=SNEW". 
Met de code <A HREF= “HTTP://WWW.- 
CLICKXMAGAZINE.BE” TARGET="NEW"> 
laat je je bezoekers dus toe om de web- 
pagina van Clickx Magazine te openen 
zonder dat ze jouw site verlaten. 
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eerste webpagina</title> 


Dit is een link naar een andere website: <hr> 


<a href="http://mww. clickxmagazine. be“>clickx Magazine</a><bhr> 


Dit ís een link naar een emailadres: <br> 


<a href="mailto:clickx@minoc.com">mail Clickx Magazine</ar<hr> 


Dit is een link naar een pagina van mijn eigen website: <br> 
<a href="pagina2.htm">Pagina 2 </a><br> 


Dit is een link via een afbeelding:<br> 


<a href="http://www. clickxmagazinë. be“><img src="Clickx. jpg"></ 


</body> 
</html> 


Mijn eerste webpagina - Microsoft Internet Explorer 
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> d le) Ei @ P 3, Zoeken De Favoriel 


Adres €) C:\Documents and Settings\Familie Debels\Mijn documenten\websit 


Dit is een link naar een andere website: 

Clickx Magazine 

Dit is een link naar een emailadres: 

Mail Clickx Magazine 

Dit is een link naar een pagina van mijn eigen website: 
Pagina 2 

Dit is een link via een afbeelding: 


Een webpagina zou geen webpagina zijn als er ner- 
gens links op terug te vinden waren. 


v 


Tabellen 


Zoals we daarjuist al even zei- 
den, heeft het niet veel zin om 
met tabs te werken in je teksten, 
want die tabs zullen door je 
browser niet overgenomen wor- 
den. Misschien heb je ook al ge- 
merkt dat je naast een afbeelding 
in je browser niet zomaar tekst 
kan plaatsen. De oplossing voor 
deze problemen is het gebrui- 
ken van een tabel. Het aanma- 
ken van een tabel doe je met de 
<TABLE>-tag. Daarna is het op- 
letten geblazen. Zoals je al weet, 
bestaan tabellen uit rijen en ko- 
lommen. Bepaal op voorhand 
hoeveel rijen en kolommen je 
nodig hebt in je tabel. Laten we 
even aannemen dat je een tabel 
wil om tekst naast een afbeel- 
ding te plaatsen. Links komt de 
afbeelding, rechts de tekst. In 
dat geval heb je dus maar één rij 
nodig, maar twee kolommen. 

Als je een tabel maakt in html, 
moet je eerst een rij aanmaken. 
Dat doe je met de code <TR> (ta- 
ble row). Daarna maak je de ta- 
ble data aan, dus de cellen in die 
rij. Als je een tabel met twee ko- 
lommen maakt, zijn er dus twee 
cellen in de rij. Zo’n cel maak je 
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aan met de code <rp>. In onze 
eerste cel komt een afbeelding. 
Dus na de code <Tp> komt de 
verwijzing naar onze afbeelding. 
Daarna sluiten we de cel weer af 
met de code </Tp>. Meteen daar- 
na plaats je weer een <td>-tag en 
typ je de tekst die je wil plaatsen 
naast je afbeelding. Als je klaar 
bent met de inhoud van deze cel, 
typ je weer </td>. Daarna ma- 
ken we met de code </TR> dui- 
delijk dat dit het einde is van de 
huidige rij van onze tabel. Om- 
dat we maar met één rij werken, 
sluiten we ook onze tabel af met 
de code </TABLE>. 

Werk je met meerdere rijen, dan 
zal je meerdere <tr>-tags ge- 
bruiken. Plaats pas een <tr>-tag 
als de vorige rij is afgesloten en 
zorg ervoor dat je in je nieuwe 
rij even veel cellen gebruikt als 
in je vorige. Maak ook pas ge- 
bruik van een <td>-tag als je de 
vorige cel hebt afgesloten met 
</td>. Wil je dat je tabel omge- 
ven wordt door een boord? Ge- 
bruik dan in je <table>-tag de 
code BORDER=I. Je kan ook een 
groter cijfer dan 1 nemen als je 
een dikkere boord wil. 


<htm1> 
<head> 


<title>mijne eerste webpagina</title> 
</head> 


std><img src="Ierland. jpg" ></td> 
std>Dit is de tekst naast de afhee 


tekst alleen naast mijn af ART 


maak van een tabel</td> 
</tr> 
</table> 


</body> 


</html> 


Met behulp van 
tabellen kan je tekst 
naast een afbeelding 
plaatsen. 


Server: Centrale netwerkcomputer die zijn diensten verleent aan de andere 
computers in het netwerk. 


Je pagina uploaden 


Met wat je tot nu toe leerde, kom je al een eind weg. Maar na- 
tuurlijk wil je het eindresultaat ook op het net kunnen be- 
wonderen. Daarvoor heb je twee dingen nodig: webruimte en 
een ftp-programma. Webruimte krijg je meestal gratis bij je 
internetaansluiting. Een ftp-programma kan je vinden op het 
internet. Op [ www.flashfxp.com | kan je een probeerversie 
downloaden van een redelijk eenvoudig ftp-programma. Voor 
je je pagina uploadt (op het internet plaatst), heb je enkele ge- 
gevens nodig. Zo heb je een ftp-adres nodig, meestal is dat 
FTP.NAAMVANJEPROVIDER.BE, en logingegevens (naam en wacht- 
woord). Deze gegevens krijg je van de aanbieder van je web- 
ruimte. Vind je ze niet tussen je papieren, dan kan je ze be- 
slist achterhalen op de website van je provider. 

Maak je gebruik van Flash FXP, dan zal je zien dat het venster 
van het programma ingedeeld is in vier delen. Links boven- 
aan kan je de inhoud van mappen op je harde schijf openen 
en bekijken. Rechts bovenaan kan je hetzelfde doen met map- 
pen en bestanden op de server, maar daarvoor moet je eerst in- 
gelogd zijn. Links onderaan is er een kadertje waar straks de 
bestanden komen die aan het uploaden zijn en rechts onder- 
aan kan je de status van het inloggen volgen (bijvoorbeeld dat 
je met succes bent ingelogd, hoeveel bestanden je hebt opge- 
laden, …). Voor je je site kan uploaden naar je webruimte, moet 
je eerst verbinding maken. Klik daarom bovenaan rechts op 
de knop met de bliksem (QUICK CONNECT). Naast SERVER OR URL: 
vul je het ftp-adres van je webruimte in, naast USER NAME je 
gebruikersnaam en naast PAssSWoRD je wachtwoord. Daarna 
klik je op CONNECT. Je kan in het venster rechts onderaan vol- 
gen of er niets foutloopt en wanneer je ingelogd bent. Als je 
ingelogd bent, zoek je links bovenaan naar de map waarin je 
je website hebt opgeslagen. Selecteer alle bestanden en sub- 
mappen die je nodig hebt (dus de inhoud van de map websi- 
te, maar niet de map website zelf) en versleep ze naar het ka- 
der rechts bovenaan. De bestanden zullen nu overgedragen 
worden naar je webruimte. 

Je kan je pagina’s nu bekijken vanop het net. Zorg ervoor dat 
je het juiste webadres hebt waarmee je die pagina’s kan be- 
reiken (bijvoorbeeld [ http://users.pandora.be/gebruikers- 
naam/ |I). Tik dat adres in in je browser en je belandt op je ei- 
gen webpagina. En nu maar volop reclame maken voor je site! 


2de, 39 Pen, 25 Total 28)M / 6.15 GB Fome 
C\Pagam Fe Far 


ed Tage San Pama 


Via een ftp-programma plaats je je pagina op het net… 


— - Wendy Debels — 
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